<template>
  <el-row type="flex" class="room-container">
    <el-row type="flex" class="live-video">
      <video-player
        role="teacher"
        :domId="`stream-player-${teacher.uid}`"
        :id="teacher.uid"
        :account="teacher.account"
        :streamID="teacher.streamID"
        :stream="teacher.stream"
        :audio="Boolean(teacher.audio)"
        :video="Boolean(teacher.video)"
        :local="teacher.local"
        v-if="!$util.isEmpty(teacher)"
      ></video-player>
      <video-player v-else role="teacher" :account="'teacher'" id="0"></video-player>
      <video-player
        role="teacher"
        :domId="`stream-player-${currentHost.uid}`"
        :id="currentHost.uid"
        :account="currentHost.account"
        :streamID="currentHost.streamID"
        :stream="currentHost.stream"
        :audio="Boolean(currentHost.audio)"
        :video="Boolean(currentHost.video)"
        :close="roomStore.state.me.role === 1 || +roomStore.state.me.uid === currentHost.streamID"
        :local="currentHost.local"
        v-if="!$util.isEmpty(currentHost)"
      ></video-player>
    </el-row>
    <el-row type="flex" class="main-container">
      <el-row
        type="flex"
        class="live-container"
        v-loading.lock="roomLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <white-board v-if="whiteBoardStatus"></white-board>
      </el-row>
      <el-row type="flex" class="live-board">
        <el-row type="flex" class="chat-board">
          <el-row type="flex" class="menu">
            <div class="item">聊天</div>
          </el-row>
          <el-row type="flex" class="chat-container">
            <chat-panel></chat-panel>
          </el-row>
        </el-row>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import { mapState } from 'vuex'
import { roomStore } from './utils/room'
import VideoPlayer from './components/video-player'
import WhiteBoard from './components/whiteboard'
import ChatPanel from './components/chat-panel'
export default {
  components: { VideoPlayer, WhiteBoard, ChatPanel },
  data() {
    return {
      roomStore: roomStore,
      localStream: {}
    }
  },
  computed: {
    ...mapState('live', ['roomLoading', 'whiteBoardStatus']),
    teacher() {
      const userAttrs = this.roomStore.state.users
      const me = this.roomStore.state.me
      const course = this.roomStore.state.course
      if (!course.teacherId || !me.uid) return
      const teacherUid = course.teacherId
      let teacherInfo = {}
      userAttrs.forEach(item => {
        if (item.uid == teacherUid) {
          teacherInfo = item
        }
      })
      if (this.$util.isEmpty(teacherInfo)) return
      // 当本地流为老师时
      if (me.uid == teacherUid) {
        return {
          ...this.roomStore.state.rtc.localStream,
          account: teacherInfo.account,
          video: teacherInfo.video,
          audio: teacherInfo.audio,
          local: true
        }
      } else {
        // 当远端流为老师时
        let meTeacherUid = ''
        this.roomStore.state.rtc.users.forEach(item => {
          if (item == +course.teacherId) {
            meTeacherUid = item
          }
        })
        if (!meTeacherUid) return null
        // 当找到老师的音视频流时
        let remoteTeacherStream = {}
        let data = null
        this.roomStore.state.rtc.remoteStreams.forEach(item => {
          if (item.uid == +teacherUid) {
            remoteTeacherStream = item
          }
        })
        if (!this.$util.isEmpty(remoteTeacherStream)) {
          data = {
            ...remoteTeacherStream,
            uid: meTeacherUid,
            account: teacherInfo.account,
            video: teacherInfo.video,
            audio: teacherInfo.audio
          }
        }
        return data
      }
    },
    currentHost() {
      const roomStore = this.roomStore.state
      const userAttrs = roomStore.users
      const me = roomStore.me
      const course = roomStore.course
      if (!course.coVideoUids || this.$util.isEmpty(course.coVideoUids)) return null
      const coVideoUid = '' + course.coVideoUids[0]
      let userAttr = userAttrs.find(user => user.uid == coVideoUid)
      if (!userAttr) return null
      // when i am current broadcaster
      if (`${me.uid}` === coVideoUid) {
        if (roomStore.rtc.localStream) {
          let _tmpStream = {
            ...roomStore.rtc.localStream,
            account: userAttr.account,
            video: userAttr.video,
            audio: userAttr.audio,
            local: true,
            streamID: +me.uid
          }
          return _tmpStream
        }
      } else {
        // when remote user is broadcaster
        const peerUid = coVideoUid
        let peerUserAttr = userAttrs.find(user => user.uid == peerUid)
        if (peerUid && peerUserAttr) {
          let tmpStream = {
            account: peerUserAttr.account,
            video: peerUserAttr.video,
            audio: peerUserAttr.audio,
            streamID: +peerUid
          }
          let remoteStream = roomStore.rtc.remoteStreams.find(user => user.uid == peerUid)
          if (remoteStream) {
            tmpStream = {
              ...tmpStream,
              ...remoteStream
            }
          }
          return tmpStream
        }
      }
      return null
    },
    roomBigStream() {
      return {
        role: this.roomStore.state.me.role,
        canPublish: this.roomStore.state.me.coVideo
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import './big-class.scss';
.chat-board {
  flex: 1;
  min-width: 280px;
  max-width: 280px;
  flex-direction: column;
  .menu {
    height: 45px;
    .item {
      flex: 1;
      font-size: 14px;
      color: #fff;
      padding: 14px 16px;
      cursor: pointer;
      min-width: 85px;
      text-align: center;
      border-bottom: 2px solid #606266;
      &.active {
        @include edu-color-auxiliary;
        @include edu-color-primary(border-color);
      }
    }
  }
  .chat-container {
    flex: 1;
    flex-direction: column;
  }
}
</style>
